import advListEjs from '$v/advlist'
import advTableEjs from '$com/advTable'
import advApi from '$a/advApi';
function addAdvBtn(){
    $('.modal-title').html('添加广告')
    // 清空表单数据
    document.advForm.reset();
    // 清除预览
    $('#preview').hide().find('img').attr('src','')
    // 清除 name=id 的表单值
    $('[name=id]').val('')
    $('#modal-default').modal('show')
}
function changeFile(){
    // 1. 获取到图片的信息
    console.log(this.files[0]);
    // 2. 生产预览图 要将图片信息===> base64URL ===> FileReader 类
    const reader = new FileReader()
    reader.readAsDataURL(this.files[0])// 读取文件信息===》 base64格式URL
    reader.onload = function(e){
        let base64URL = e.currentTarget.result
        $('#preview').show().find('img').attr('src',base64URL)
    }
    // 3. 将预览图放入 img src属性，实现图片展示
}
async function saveBtn(){
    // 获取 name=id 的表单值
    let _id = $('[name=id]').val()
    
    // 1. 获取表单数据 formdata
    let formdata = new FormData(document.advForm);
    // 2. 验证数据
    let advTitle = formdata.get('advTitle').trim()
    let advOrder = formdata.get('advOrder').trim()
    let advHref = formdata.get('advHref').trim()
    if(!advTitle.length){
        toastr.error('标题不能为空')
        return
    }else if(!advOrder.length){
        toastr.error('排序值不能为空')
        return
    }else if(!advHref.length){
        toastr.error('链接不能为空')
        return
    }
    // 3. 发送
    let result;
    if(_id.length===0){//新增操作
        result = await advApi.addAdv(formdata)
    }else{
        // 编辑操作，应该请求编辑的api
        result = await advApi.editAdv(formdata,_id)
    }
    let {code, msg} = result
    // 4. 根据结果处理
    if(code){
        toastr.error(msg)
    }else{
        // 1. 清空表单数据
        document.advForm.reset()
        // 2. 关闭预览图
        $('#preview').hide().find('img').attr('src','')
        // 3. 关闭模态框
        $('#modal-default').modal('hide')
        // 4. 重新渲染广告列表
        await getAdvList()
    }
}
/**
 * 获取广告列表
 * @returns 
 */
async function getAdvList(pageIndex=1){
    let keyword = $('[name=keyword]').val().trim()
    let {code, msg, data} = await advApi.getAdvList(pageIndex,keyword);
    $('#advTable').html(advTableEjs({...data}))//data { advList,totalPage,pageIndex }
}

async function editBtnClick(){
    $('.modal-title').html('编辑广告')
    let _id = this.dataset.id;
    // 要通过id获取到当前广告的所有数据
    let {data:{adv}} = await advApi.getById(_id)
    $('[name=advTitle]').val(adv.advTitle)
    $('[name=advType]').val(adv.advType)
    $('[name=advOrder]').val(adv.advOrder)
    $('[name=advHref]').val(adv.advHref)
    // 显示预览图
    $('#preview').show().find('img').attr('src','http://localhost:7000/upload/' + adv.advPic)
    // 将id 显示到界面   $('表单元素').val() ==> 设置表单元素的value
    $('[name=id]').val(adv._id)

    $('#modal-default').modal('show')
}

async function search(){
    getAdvList()
}
function pageBtn(){
    let pageIndex = this.dataset.pageIndex;
    getAdvList(pageIndex)
}
/**
 * 
 * @returns 删除广告
 */
async function deleteAdv(){
    if(!confirm('确定删除么？')) return;
    let _id = this.dataset.id;
    // 发起请求 删除
    let {code,msg} = await advApi.deleteAdv(_id)
    if(code){
        //失败
        toastr.error(msg)
    }else{
        toastr.success(msg)
        // 刷新列表
        getAdvList()
    }
}
export default function advController() {
    return async (req, res) => {
        res.render(advListEjs())
        // 获取管理员列表
        await getAdvList()
        $('#titleShow').html('广告列表');
        // 点击添加广告按钮，弹出模态框
        $('#addAdvBtn').on('click',addAdvBtn)
        // 选择图片文件时，形成预览
        $('[name=advPic]').on('change',changeFile)
        // 点击保存按钮，添加广告
        $('#saveBtn').on('click',saveBtn)
        // 点击编辑按钮，弹出模态框，显示当前广告数据
        $('#advTable').on('click','.editBtn',editBtnClick)
        // 点击搜索按钮根据keyword进行搜索
        $('#searchBtn').on('click',search)
        // 给页码绑定单击事件
        $('#advTable').on('click','.page-item', pageBtn)
        // 删除按钮事件委托
        $('#advTable').on('click', '.delBtn',deleteAdv)
    }
}